<template>
  <el-drawer
    append-to-body
    destroy-on-close
    :size="size"
    :title="title"
    :visible.sync="drawer"
    @close="close"
  >
    <div v-if="drawer">
      <div v-if="form == null" class="noInfo">
        <el-empty description="暂无业主信息" />
        <el-button type="primary" @click="addOwner">添加业主信息</el-button>
      </div>
      <div v-else class="ownerBox">
        <div class="bigTitle">{{ info.room_address }}</div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="业主信息" name="1">
            <div class="ownerDetail">
              <div class="titleBox">
                <div class="title">
                  <div class="titleName">业主信息</div>
                  <el-button class="edit" type="text" @click="editInfo">
                    编辑
                  </el-button>
                </div>
              </div>
              <div class="detail">
                <div class="textForm">
                  <div class="label">
                    <div class="name">姓名</div>
                    <div class="value">
                      {{ form.user_name }}
                    </div>
                  </div>
                  <div class="label">
                    <div class="name">证件号</div>
                    <div v-if="form.id_card == ''" class="value">--</div>
                    <div v-else class="value">
                      {{ form.id_card }}
                    </div>
                  </div>
                  <div class="label">
                    <div class="name">联系方式</div>
                    <div class="value">
                      {{ form.user_mobile }}
                    </div>
                  </div>
                  <div class="label">
                    <div class="name">租赁周期</div>
                    <div class="value">
                      {{ form.contract_start_date }}至{{
                        form.contract_end_date
                      }}
                    </div>
                  </div>
                  <div class="label">
                    <div class="name">月租金</div>
                    <div
                      class="value"
                      v-html="Number(form.rent_price).toFixed(2) + '元'"
                    ></div>
                  </div>
                  <div class="label">
                    <div class="name">押金</div>
                    <div
                      class="value"
                      v-html="Number(form.deposit_money).toFixed(2) + '元'"
                    ></div>
                  </div>
                  <div class="label">
                    <div class="name">付款方式</div>
                    <div v-if="form.pay_months == 0" class="value">一次性</div>
                    <div v-else-if="form.pay_months == 12" class="value">
                      每1年
                    </div>
                    <div v-else class="value">每{{ form.pay_months }}月</div>
                  </div>
                  <div class="label"></div>
                  <div v-if="form.bank_name != ''" class="label">
                    <div class="name">收款银行</div>
                    <div class="value">
                      {{ form.bank_name }}
                    </div>
                  </div>
                  <div v-if="form.bank_account != ''" class="label">
                    <div class="name">银行账号</div>
                    <div class="value">
                      <span>{{ form.bank_account }}</span>
                      <el-button
                        type="text"
                        @click="copy(form.bank_account, $event)"
                      >
                        复制
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="titleBox">
                <div class="title">
                  <div class="titleName">房间备注</div>
                  <el-button class="edit" type="text" @click="editDesc">
                    编辑
                  </el-button>
                </div>
              </div>
              <div class="detail">
                <div v-if="form.owner_remark == ''" class="empty">暂无备注</div>
                <div v-else class="text">
                  {{ form.owner_remark }}
                </div>
              </div>
              <div class="titleBox">
                <div class="title">
                  <div class="titleName">视频图片</div>
                  <el-button class="edit" type="text" @click="editMedia">
                    编辑
                  </el-button>
                </div>
              </div>
              <div class="detail">
                <div v-if="form.owner_images == ''" class="empty">
                  暂无视频图片
                </div>
                <div v-else class="media">
                  <div v-for="item in imageList" :key="item" class="box">
                    <div class="mediaOut">
                      <el-image
                        alt=""
                        :preview-src-list="imageList"
                        :src="item"
                      />
                    </div>
                    <div class="icons">
                      <vab-icon
                        icon="download-cloud-2-line"
                        @click="download(item)"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="完成账单" name="2">
            <div class="billTitle">
              <div></div>
              <el-button @click="addpay">添加记账</el-button>
            </div>
            <el-table v-loading="payListLoading" :data="payList">
              <el-table-column
                label="费用名称"
                prop="bill_title"
                show-overflow-tooltip
              />
              <el-table-column label="金额" prop="bill_money">
                <template #default="{ row }">
                  <div
                    v-if="row.bill_type == 'income'"
                    v-html="'+' + Number(row.bill_money).toFixed(2) + '元'"
                  ></div>
                  <div
                    v-else-if="row.bill_type == 'payed'"
                    v-html="'-' + Number(row.bill_money).toFixed(2) + '元'"
                  ></div>
                </template>
              </el-table-column>
              <el-table-column
                label="日期"
                prop="bill_date"
                show-overflow-tooltip
              />
              <el-table-column label="图片/备注" width="80">
                <template #default="{ row }">
                  <div class="iconMore">
                    <el-tooltip
                      class="item"
                      content="查看图片"
                      effect="dark"
                      placement="top"
                    >
                      <span>
                        <vab-icon
                          v-if="row.bill_images != ''"
                          class="icon"
                          icon="image-2-line"
                          @click="lookImage(row)"
                        />
                      </span>
                    </el-tooltip>
                    <el-tooltip
                      class="item"
                      content="查看备注"
                      effect="dark"
                      placement="top"
                    >
                      <span>
                        <vab-icon
                          v-if="row.bill_desc != ''"
                          class="icon"
                          icon="file-list-line"
                          @click="lookDesc(row)"
                        />
                      </span>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="操作"
                show-overflow-tooltip
                width="60"
              >
                <template #default="{ row }">
                  <el-dropdown
                    @command="
                      (value) => {
                        payMenu(value, row)
                      }
                    "
                  >
                    <span class="el-dropdown-link payMenu">更多</span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="editImage">
                        编辑图片
                      </el-dropdown-item>
                      <el-dropdown-item command="editDesc">
                        编辑备注
                      </el-dropdown-item>
                      <el-dropdown-item command="deletepay">
                        删除
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
              <template #empty>
                <el-empty description="暂无数据" />
              </template>
            </el-table>
            <el-pagination
              background
              :current-page="querypay.page"
              :layout="layout"
              :page-size="querypay.perpage"
              :total="paytotal"
              @current-change="payPageChange"
            />
          </el-tab-pane>
          <el-tab-pane label="代付账单" name="3">
            <div class="billTitle">
              <div></div>
              <el-button @click="addpaynot">添加待付账单</el-button>
            </div>
            <el-table
              v-loading="payNotListLoading"
              :data="payNotList"
              @selection-change="setSelectRows"
            >
              <el-table-column
                align="center"
                show-overflow-tooltip
                type="selection"
              />
              <el-table-column
                label="费用名称"
                prop="bill_title"
                show-overflow-tooltip
              />
              <el-table-column label="金额" prop="bill_money">
                <template #default="{ row }">
                  <div
                    v-if="row.bill_type == 'income'"
                    v-html="'+' + Number(row.bill_money).toFixed(2) + '元'"
                  ></div>
                  <div
                    v-else-if="row.bill_type == 'payed'"
                    v-html="'-' + Number(row.bill_money).toFixed(2) + '元'"
                  ></div>
                </template>
              </el-table-column>
              <el-table-column
                label="日期"
                prop="bill_date"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                label="操作"
                show-overflow-tooltip
                width="85"
              >
                <template #default="{ row }">
                  <el-button type="text" @click="setPayed(row)">付款</el-button>
                  <el-button type="text" @click="deletepaynot(row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
              <template #empty>
                <el-empty description="暂无数据" />
              </template>
            </el-table>
            <el-pagination
              background
              :current-page="querypaynot.page"
              :layout="layout"
              :page-size="querypaynot.perpage"
              :total="paynottotal"
              @current-change="paynotPageChange"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <owner-add ref="ownerAdd" @fetch-data="addOwnerSuccess" />
    <owner-desc ref="ownerDesc" @fetch-data="getOwnerDetail" />
    <owner-media ref="ownerMedia" @fetch-data="getOwnerDetail" />
    <did-bill ref="didBill" @fetch-data="getpayList" />
    <do-bill ref="doBill" @fetch-data="getpayNotList" />
    <set-payed ref="setPayed" @fetch-data="getpayNotList" />
    <bill-desc ref="billDesc" @fetch-data="getpayList" />
    <bill-images ref="billImages" @fetch-data="getpayList" />
    <el-image-viewer
      v-if="imageViewer"
      :on-close="closeViewer"
      :url-list="imageviewerList"
    />
    <el-dialog
      append-to-body
      title="查看备注"
      :visible.sync="dialogDescVisible"
      width="500px"
      @close="closeDesc"
    >
      <div class="desc">{{ desc }}</div>
      <template #footer>
        <el-button type="primary" @click="closeDesc">确定</el-button>
      </template>
    </el-dialog>
    <div v-if="selectRows.length > 0" class="drawerFooter">
      <el-button type="danger" @click="deletePayNotMore">删 除</el-button>
    </div>
  </el-drawer>
</template>

<script>
import { detailOwner } from '@/api/owner'
import { billList, deleteOwnerBill } from '@/api/ownerBill'
import handleClipboard from '@/utils/clipboard'
import { downloadFile } from '@/utils/index'
import ownerAdd from './components/ownerAdd'
import ownerDesc from './components/ownerDesc'
import ownerMedia from './components/ownerMedia'
import didBill from './components/didBill'
import doBill from './components/doBill'
import setPayed from './components/setPayed'
import billDesc from './components/billDesc'
import billImages from './components/billImages'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  name: 'RoomSet',
  components: {
    ownerAdd,
    ownerDesc,
    ownerMedia,
    didBill,
    doBill,
    setPayed,
    billDesc,
    billImages,
    ElImageViewer,
  },
  data() {
    return {
      info: {},
      form: null,
      size: 700,
      title: '业主信息',
      activeName: '1',
      drawer: false,
      imageList: [],
      layout: 'total, prev, pager, next',
      payList: [],
      querypay: {
        page: 1,
        perpage: 10,
        is_pay: 1,
      },
      paytotal: 0,
      payListLoading: false,
      payNotList: [],
      querypaynot: {
        page: 1,
        perpage: 10,
        is_pay: 0,
      },
      paynottotal: 0,
      selectRows: [],
      payNotListLoading: false,
      imageviewerList: [],
      imageViewer: false,
      dialogDescVisible: false,
      desc: '',
      dialogDateVisible: false,
    }
  },
  methods: {
    showEdit(info) {
      this.info = info
      this.info.id = info.room_id
      if (info.owner_id == 0 || info.owner_id == null) {
        this.form = null
      } else {
        this.form = {}
        this.getOwnerDetail()
      }
      this.drawer = true
    },
    setSelectRows(val) {
      this.selectRows = val
    },
    addOwner() {
      this.$refs['ownerAdd'].showEdit('add', this.info.id)
    },
    editInfo() {
      this.$refs['ownerAdd'].showEdit('edit', this.form)
    },
    editDesc() {
      this.$refs['ownerDesc'].showEdit(this.form)
    },
    editMedia() {
      this.$refs['ownerMedia'].showEdit(this.form)
    },
    addpay() {
      this.$refs['didBill'].showEdit('owner', this.form)
    },
    addpaynot() {
      this.$refs['doBill'].showEdit('owner', this.form)
    },
    setPayed(row) {
      this.$refs['setPayed'].showEdit('owner', row)
    },
    payMenu(type, row) {
      if (type == 'editImage') {
        this.$refs['billImages'].showEdit('owner', row)
      }
      if (type == 'editDesc') {
        this.$refs['billDesc'].showEdit('owner', row)
      }
      if (type == 'deletepay') {
        this.$baseConfirm(
          '你确定要删除此账单吗，删除后，此账单将被永久清除',
          null,
          async () => {
            const { data } = await deleteOwnerBill({
              bill_ids: String(row.id),
            })
            if (data.is_success) {
              this.$baseMessage(
                '删除成功',
                'success',
                'vab-hey-message-success'
              )
              this.getpayList()
            }
          }
        )
      }
    },
    deletepaynot(row) {
      this.$baseConfirm(
        '你确定要删除此账单吗，删除后，此账单将被永久清除',
        null,
        async () => {
          const { data } = await deleteOwnerBill({ bill_ids: String(row.id) })
          if (data.is_success) {
            this.$baseMessage('删除成功', 'success', 'vab-hey-message-success')
            this.getpayNotList()
          }
        }
      )
    },
    deletePayNotMore() {
      this.$baseConfirm(
        '你确定要删除选中的' + this.selectRows.length + '条账单吗',
        null,
        async () => {
          const ids = this.selectRows.map((item) => item.id).join()
          const { data } = await deleteOwnerBill({ bill_ids: ids })
          if (data.is_success) {
            this.$baseMessage('删除成功', 'success', 'vab-hey-message-success')
            this.getpayNotList()
          }
        }
      )
    },
    handleClick(tab) {
      if (tab.name == 1) {
        this.getOwnerDetail()
      } else if (tab.name == 2) {
        this.getpayList()
      } else if (tab.name == 3) {
        this.getpayNotList()
      }
    },
    lookImage(row) {
      this.imageviewerList = row.bill_images.split(',')
      this.imageViewer = true
    },
    closeViewer() {
      this.imageViewer = false
      this.imageviewerList = []
    },
    lookDesc(row) {
      this.desc = row.bill_desc
      this.dialogDescVisible = true
    },
    closeDesc() {
      this.dialogDescVisible = false
      this.desc = ''
    },
    payPageChange(val) {
      this.querypay.page = val
      this.getpayList()
    },
    paynotPageChange(val) {
      this.querypaynot.page = val
      this.getpayNotList()
    },
    download(item) {
      downloadFile(item)
    },
    copy(text, event) {
      handleClipboard(text, event)
    },
    close() {
      this.form = this.$options.data().form
      this.drawer = false
      this.activeName = '1'
    },
    addOwnerSuccess(id) {
      this.info.owner_id = id
      this.getOwnerDetail()
    },
    async getpayList() {
      this.payListLoading = true
      this.querypay.room_id = this.info.id
      const { data } = await billList(this.querypay)
      this.payList = data.bill_data.items
      this.paytotal = data.bill_data.total
      this.payListLoading = false
    },
    async getpayNotList() {
      this.payNotListLoading = true
      this.querypaynot.room_id = this.info.id
      const { data } = await billList(this.querypaynot)
      this.payNotList = data.bill_data.items
      this.paynottotal = data.bill_data.total
      this.payNotListLoading = false
    },
    async getOwnerDetail() {
      const { data } = await detailOwner({ owner_id: this.info.owner_id })
      this.form = data.info
      this.imageList =
        data.info.owner_images == '' ? [] : data.info.owner_images.split(',')
    },
  },
}
</script>
<style lang="scss" scoped>
.noInfo {
  text-align: center;
  padding-top: 50px;
}
.ownerBox {
  .bigTitle {
    padding: 16px 16px 8px;
    background: #f0f7ff;
    font-size: 16px;
    color: #000;
    font-weight: bolder;
  }
  ::v-deep .el-tabs__content {
    padding: 0 20px;
  }
  ::v-deep .el-tabs__nav-scroll {
    padding: 0 20px;
    background: #f0f7ff;
  }
}
.titleBox {
  display: flex;
  justify-content: space-between;
  height: 32px;
  margin: 10px 0;
  .title {
    display: flex;
    padding-left: 16px;
    line-height: 32px;
    position: relative;
    &::after {
      content: '';
      display: block;
      position: absolute;
      width: 4px;
      height: 20px;
      background: #6898fc;
      top: 6px;
      left: 0;
      border-radius: 2px;
    }
    .titleName {
      font-size: 16px;
      font-weight: 700;
      color: rgba(0, 0, 0, 0.85);
    }
    .edit {
      color: #f5961e;
      margin-left: 16px;
    }
  }
}
.detail {
  background: #f0f7ff;
  border-radius: 8px;
  padding: 12px 16px;
  .textForm {
    display: flex;
    flex-wrap: wrap;
    .label {
      width: 50%;
      display: flex;
      height: 32px;
      line-height: 32px;
      .name {
        width: 80px;
        text-align: right;
        color: #666;
      }
      .value {
        margin-left: 10px;
        flex: 1;
        color: #3f3f3f;
        .el-button {
          margin-left: 10px;
        }
      }
    }
  }
  .empty {
    color: #999;
  }
}
.billTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.iconMore {
  .icon {
    font-size: 20px;
    cursor: pointer;
    margin-right: 10px;
    color: #999;
    &:hover {
      color: #91b8ff;
    }
  }
}
.payMenu {
  color: #5187f7;
  cursor: pointer;
}
.customer {
  .empty {
    background: #f0f7ff;
    border-radius: 8px;
    padding: 12px 16px;
    color: #999;
  }
  .textList {
    .textBox {
      background: #f0f7ff;
      border-radius: 8px;
      padding: 3px 16px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name {
        width: 150px;
      }
      .mobile {
        width: 220px;
      }
      span {
        margin-left: 5px;
      }
      .deleteBtn {
        color: #ee5959;
      }
    }
  }
}
.media {
  display: flex;
  flex-wrap: wrap;
  .box {
    width: 90px;
    height: 90px;
    margin: 0 5px 10px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    .mediaOut {
      width: 90px;
      height: 90px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      position: relative;
      i {
        position: absolute;
        color: #3f3f3f;
        font-size: 30px;
        top: calc(50% - 26px);
        left: calc(50% - 15px);
      }
      ::v-deep .el-image__inner {
        width: 90px;
        height: 90px;
        object-fit: cover;
      }
    }
    .icons {
      background: rgba(255, 255, 255, 0.9);
      height: 25px;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        margin: 0 8px;
        color: #6898fc;
        cursor: pointer;
      }
    }
  }
}

.customerBox {
  background: #f0f7ff;
  border-radius: 8px;
  padding: 10px;
  .boxTop {
    display: flex;
    justify-content: space-between;
    .topLeft {
      .status {
        display: inline-block;
        padding: 6px 10px;
        font-size: 12px;
        line-height: 12px;
        font-weight: 500;
        color: #5187f7;
        background: #dee7ff;
        border-radius: 4px;
        margin: 0 15px 0 2px;
      }
      .name {
        display: inline-block;
        font-weight: bolder;
      }
    }
  }
  .boxBot {
    color: #999;
  }
}
.el-image-viewer__wrapper {
  z-index: 99999 !important;
}
.desc {
  height: 100px;
}
.drawerFooter {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 10px 16px;
  .el-button {
    float: right;
  }
}
</style>